import React from 'react'
import '../assets/styles'
import '../assets/styles/contextMenu.scss'
import IdUtil from "../basic/utils/IdUtil";

/**
 * 名称：右键菜单
 * 创建人：Dada.
 * 创建时间：2021年07月22日20:54:51
 * TODO:需要支持子菜单
 */
class ContextMenu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            targetEvent: null,
            menuList: [],
            id: IdUtil.uuid(true)
        }
    }

    componentDidMount() {
        document.addEventListener('contextmenu', this._handleContextMenu);
        document.addEventListener('click', this._handleClick);
        this.warp.addEventListener('scroll', this._handleScroll);
    };

    componentWillUnmount() {
        document.removeEventListener('contextmenu', this._handleContextMenu);
        document.removeEventListener('click', this._handleClick);
        this.warp.removeEventListener('scroll', this._handleScroll);
    }

    _handleContextMenu = (event) => {
        if (!$(event.toElement).parents('.contextMenuWarp').hasClass(this.state.id)) {
            return this.setState({visible: false, targetEvent: event});
        }
        const {menuList, onLoadMenuList} = this.props;
        let mList = [];
        //获取MenuList菜单数据
        if (!menuList) {
            mList = onLoadMenuList && onLoadMenuList(event);
            if (!mList || mList.length === 0) {
                return;
            }
        } else {
            mList = menuList;
        }
        this.setState({
            visible: true,
            targetEvent: event,
            menuList: mList
        })

        const clickX = event.clientX;
        const clickY = event.clientY;
        const screenW = window.innerWidth;
        const screenH = window.innerHeight;
        const rootW = this.root.offsetWidth;
        const rootH = this.root.offsetHeight;

        const right = (screenW - clickX) > rootW;
        const left = !right;
        const top = (screenH - clickY) > rootH;
        const bottom = !top;

        if (right) {
            this.root.style.left = `${clickX + 5}px`;
        }

        if (left) {
            this.root.style.left = `${clickX - rootW - 5}px`;
        }

        if (top) {
            this.root.style.top = `${clickY + 5}px`;
        }

        if (bottom) {
            this.root.style.top = `${clickY - rootH - 5}px`;
        }
        event.preventDefault();

    };
    onMenuItemClick = (item, e) => {
        const {visible} = this.state;
        if (item.isBan) {
            e.stopPropagation()
            return;
        }
        item.event(item, this.state.targetEvent);
        if (visible) this.setState({visible: false});
    }

    _handleClick = () => {
        const {visible} = this.state;
        if (visible) this.setState({visible: false});
    };

    _handleScroll = () => {
        const {visible} = this.state;
        if (visible) this.setState({visible: false,});
    };

    render() {
        const {visible, menuList, id} = this.state;
        const {className, style} = this.props;
        return (
            <div style={style} className={`contextMenuWarp ${className} ${id}`} ref={ref => {
                this.warp = ref
            }}>
                {this.props.children}
                {
                    (visible || null) &&
                    <div ref={ref => {
                        this.root = ref
                    }} className={`contextMenu`}>
                        {
                            menuList.map((item, index) => {
                                return (
                                    <div key={item.name + index}>
                                        {item.isLine ? <div className="contextMenu--separator"/> : ''}
                                        <div onClick={this.onMenuItemClick.bind(this, item)}
                                             className={`contextMenu--option ${item.isBan ? 'contextMenu--option__disabled' : ''}`}> {item.name}</div>
                                    </div>
                                );
                            })
                        }
                        {/*<div className="contextMenu--option">Share this</div>*/}
                        {/*<div className="contextMenu--option">New window</div>*/}
                        {/*<div className="contextMenu--option">Visit official site</div>*/}
                        {/*<div className="contextMenu--option contextMenu--option__disabled">View full version</div>*/}
                        {/*<div className="contextMenu--option">Settings</div>*/}
                        {/*<div className="contextMenu--separator"/>*/}
                        {/*<div className="contextMenu--option">About this app</div>*/}
                    </div>
                }
            </div>
        )
    }

    ;
}

export default ContextMenu;
